<template>
  <div class="comment">
    <section class="tj2_head">
		<div class="tj2_head_bg"></div>
		<div class="tj2_head_warp">
			<div class="tj2_head_l">
				<img src="../assets/img/headleft.jpg" alt="">
				<span class="lsthd_icon">歌单</span>
				<van-icon name="service-o">422万</van-icon>
			</div>
			<div class="tj2_head_r">
				<h2 class="tj2_head_r_text">所以你并没有坚定地选择过我</h2>
				<div class="tj2_head_r_touxiang">
					<a style="text-decoration: none;" href="https://y.music.163.com/m/user?id=499476193" class="lsthd_link">
						<div class="lsthd_ava">
							<img src="../assets/img/headright.jpg" alt="">
						</div>
						長野柔
					</a>
				</div>
			</div>
		</div>
	</section>
	<h1 class="nav" style="height: 0.6rem;line-height: 0.6rem;color: #666;background-color: #eeeff0;padding: 0 0.3rem;">最新音乐</h1>
		<div style="">
		  <ul style="height: 17.2rem;position: relative;">
		       <li v-for="(article,index) in articles" style="height: 1.5rem;border-bottom: 1px solid #eeeff0;padding-top: 0.2rem;margin-left: .5rem;margin-right: .2rem;">
				   <span style="color: #999;font-size: .5rem;width: 0.6rem;height: 0.7rem;line-height: 0.7rem;display: inline-block;vertical-align: middle;">{{index = (index+1)}}</span>
		           <a v-bind:href="article.url" style="color:#333;font-size:.5rem;text-decoration: none;">
		  		 {{article.title}}
		  		 </a>
		  		 <p style="color:gray;"><span style="font-size:.1rem;margin-left: 0.7rem;"></span> {{article.content}}</p>
		  		 <span style="float:right;margin-top: -1rem;">
		  			 <van-icon name="play-circle-o" color="gray" size=".8rem"/>
		  		 </span>
				</li>
				<div style="position: absolute;z-index: 10;left: 0;right: 0;bottom: 0;height:5.16rem;background-image: linear-gradient(180deg,hsla(0,0%,97.3%,.7),#f8f8f8 60%);width: 100%;}">
					<div style="margin-top: 4rem;color: #999;font-size: 0.35rem;text-align: center;">查看更多歌曲，请下载客户端</div>
					</div>
		   </ul>
		   </div>
		   <!-- 评论部分 -->
		   <h1 class="nav" style="height: 0.6rem;line-height: 0.6rem;color: #666;background-color: #eeeff0;padding: 0 0.3rem;">精彩评论</h1>
		   	<div style="">
		   	  <ul style="height: 17.2rem;position: relative;">
		   	       <li v-for="comments in comment" style="height: 3.rem;padding-top: 0.2rem;display: flex;flex-direction: row;">
					   <a v-bind:href="comments.url" style="text-decoration: none;margin: .2rem .3rem 0 .3rem;position: relative;display: inline-block;flex: none;">
					   <img :src="comments.img" alt="" style="display: inline-block;border-radius: 50%;width: .8rem;height: .8rem;">
					   </a>
					   <div style="padding-bottom: .2rem;padding-right: .2rem;position: relative;border-bottom: 1px solid #eeeff0;">
						   <a v-bind:href="comments.url" style="text-decoration: none;font-size: 14px;color: #666;line-height: 20px;overflow: hidden;white-space: nowrap;">
						     {{comments.name}}
						     </a>
						     <a v-bind:href="comments.url" style="text-decoration: none;display: block;color: #999;margin-bottom: .3rem;">
						   {{comments.title}}
						   </a>
						   <p ><span style="font-size: .42rem;">{{comments.content}}</span></p>
						   <div style="position: absolute;right:.4rem;top: 1.2rem;">
							   <span style="float:right;margin-top: -1rem;color: #999;font-size:.3rem;position: relative;">
							   		   	  			<span style="position: absolute;top: .1rem;right: .5rem;"> 216 </span>&nbsp;<van-icon name="good-job-o" size=".5rem"/>
							   </span>
						   </div>
					   </div>
		   			</li>
		   	   </ul>
		   	   </div>
			   <div style="margin-left: 2rem;margin-top: 4.2rem;padding-bottom: .8rem;">
			   				   <span style="display: block;margin-right: 2rem;font-size: .4rem;color: #999;text-align: center;line-height: 1;">查看全部364条评论></span>
			   </div>
			   <van-tabbar v-model="active">
			     <van-tabbar-item ><span class="tj2_dibuxiazai" style="background-color: #ff3a3a;color: #FFFFFF;width: 6.8rem;height: 1rem;display: inline-block;border-radius: 36px;text-align: center;line-height: 1rem;font-size: .48rem;">收藏歌单</span></van-tabbar-item>
			   </van-tabbar>
  </div>
</template>

<script>
export default {
	  name: 'Comment',
	  data() {
	  	return {
			info:true,
			articles: [
				{
					"title": "谁(Live版)",
					"url": "http://localhost:8081/#/musicplay",
					"content": "廖俊涛 - 谁(Live版)"
				},
				{
					"title": "你是我的世界",
					"url": "https://www.runoob.com/html/html-tutorial.html",
					"content": "Pyb - 你是我的世界"
				},
				{
					"title": "逃离这城市",
					"url": "https://www.runoob.com/css3/css3-tutorial.html",
					"content": "张靖中 / THE SHINING - 逃离这城市"
				},
				{
					"title": "微光",
					"url": "https://www.runoob.com/css3/css3-tutorial.html",
					"content": "周翔 - 微光"
				},
				{
					"title": "Hey Boy",
					"url": "https://www.runoob.com/sql/sql-tutorial.html",
					"content": "Sia- Hey Boy"
				},
				{
					"title": "我赶去很远 却一个人坐在你的城市",
					"url": "https://www.runoob.com/css/css-tutorial.html",
					"content": "陈悸林 - 我赶去很远 却一个人坐在你的城市"
				},
				{
					"title": "阑",
					"url": "https://www.runoob.com/css3/css3-tutorial.html",
					"content": "樊音 / 周翔 - 阑"
				},
				{
					"title": "星火燎原",
					"url": "https://www.runoob.com/css3/css3-tutorial.html",
					"content": "方续Cuz / 星火燎原"
				},
				{
					"title": "闪电鞭",
					"url": "https://www.runoob.com/css3/css3-tutorial.html",
					"content": "马保国 / 闪电鞭"
				},{
					"title": "小熊维尼寻爱记",
					"url": "https://www.runoob.com/css3/css3-tutorial.html",
					"content": "方续Cuz / 小熊维尼寻爱记"
				}
				
			],
			comment:[
				{
					img:require('../assets/img/pinglun1.png'),
					"name": "小静在角落爱你",
					"title": "2020年8月12日",
					"url": "https://www.runoob.com/css3/css3-tutorial.html",
					"content": "“你不是睡着了吗?特别关心的声音稍微有点大”"
				},
				{
					img:require('../assets/img/pinglun2.jpg'),
					"name": "長野柔",
					"title": "2020年8月12日",
					"url": "https://www.runoob.com/css3/css3-tutorial.html",
					"content": "有人把错误归结于你的敏感，有人会保护好你的敏感。"
				},
				{
					img:require('../assets/img/pinglun3.jpg'),
					"name": "吐泡泡_Q",
					"title": "2020年8月14日",
					"url": "https://www.runoob.com/css3/css3-tutorial.html",
					"content": "他如果要喜欢我 早就把身边七七八八的关系清理干净 一点醋别让我吃 我不仅懒得跟她们挤 我还懒得跟他说。"
				},
				{
					img:require('../assets/img/pinglun4.jpg'),
					"name": "把爱意珍藏syh",
					"title": "2020年8月13日",
					"url": "https://www.runoob.com/css3/css3-tutorial.html",
					"content": "希望你记住我的好或者记住我就好.爱你的人不会给别人留位置。"
				},
				{
					img:require('../assets/img/pinglun5.jpg'),
					"name": "打大大怪兽",
					"title": "2020年10月23日",
					"url": "https://www.runoob.com/css3/css3-tutorial.html",
					"content": "有人把错误归结于你的敏感，有人会保护好你的敏感。"
				},
				{
					img:require('../assets/img/pinglun6.jpg'),
					"name": "長野柔",
					"title": "2020年10月12日",
					"url": "https://www.runoob.com/css3/css3-tutorial.html",
					"content": "拉拉扯扯几年 互相都谈过别的恋爱 但是 每隔一段时间 都会联系 你说这是爱还是折磨 其实 我也说不上来"
				},
				{
					img:require('../assets/img/pinglun7.jpg'),
					"name": "我不是云长呐",
					"title": "2020年10月17日",
					"url": "https://www.runoob.com/css3/css3-tutorial.html",
					"content": "都怪我的演技太高， 你只看到了我的满心欢喜， 看不到我的欲言又止"
				}
			]
			
	  	}
	  },
	 
	
	}
</script>


<style scoped>
	.tj2_head {
		position: relative;
		padding: 0.8rem 0.3rem 0.8rem 0.4rem;
		overflow: hidden;
	}
	.tj2_head_bg {
		background: url(../assets/img/headbg.jpg);
		background-repeat: no-repeat;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		background-size:cover;
		background-position: 10%;
	}
	.tj2_head_bg::after {
		content: " ";
		background-color: rgba(0,0,0,.35);
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}
	.tj2_head_warp {
		display: flex;
		position: relative;
		z-index: 2;
	}
	.tj2_head_warp .tj2_head_l {
		width: 3.2rem;height:3.2rem;
		position: relative;
		background-color: #e2e2e3;
	}
	.tj2_head_warp .tj2_head_l img {
		width: 100%;
	}
	.tj2_head .lsthd_icon {
		position: absolute;
		z-index: 3;
		top: 10px;
		left: 0;
		padding: 0 8px;
		height: 17px;
		color: #fff;
		font-size: 9px;
		text-align: center;
		line-height: 17px;
		background-color: rgba(217,48,48,.8);
		border-top-right-radius: 17px;
		border-bottom-right-radius: 17px;
	}
	.van-icon-service-o {
		position: absolute;
		right: 2px;
		top: 0;
		z-index: 3;
		padding-left: 15px;
		color: #fff;
		font-size: 12px;
		background-position: 0;
		background-repeat: no-repeat;
		background-size: 11px 10px;
		text-shadow: 1px 0 0 rgb(0 0 0 / 15%);
	}
	.tj2_head_l::after {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height:0.4rem;
		z-index: 2;
		background-image: linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.2));
	}
	.tj2_head_r {
		flex: 1 1 auto;
		width: 1%;
		margin-left: 16px;
	}
	.tj2_head_r_text {
		padding-top: 0.1rem;
		font-size: 0.45rem;
		line-height: 1.3;
		color: #fefefe;
		height: 0.6rem;
		white-space: normal;
	}
	.tj2_head_r_touxiang {
		display: block;
		position: relative;
		margin-top: 1rem;
	}
	.tj2_head_r_touxiang .lsthd_link {
		color: #FFFFFF;
		display: inline-block;
	}
	.tj2_head_r_touxiang .lsthd_link .lsthd_ava {
		display: inline-block;
		width: 0.8rem;
		height: 0.8rem;
		border-radius: 50%;
		vertical-align: middle;
		margin-right: .5px;
	}
	.lsthd_link .lsthd_ava img {
		border-radius: 50%;
		width: 100%;
	}
	.van-tabbar-item--active {
		border-top: 1px solid #ff3a3a;
	}
	.tj2_dibuxiazai::after {
		content: "";
		display: inline-block;
		position: relative;
		top: .1rem;
		width: .6rem;
		height: .6rem;
		background-size: contain;
		margin-right: .1rem;
		background: url(../assets/img/dibuxiazai.svg)no-repeat;
	}
</style>
